<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<!-- 头部 -->
		<view class="header">
			<view class="header-left" v-if="userToken">
				<image class="header-img" :src="userInfo.photo_url"></image>
				<view>{{userInfo.realname?userInfo.realname:userInfo.nickname}}</view>
			</view>
			<view v-else class="header-left" @click="toLogin">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/default.png"></image>
				<view>请先登录</view>
			</view>
			<view class="header-right" v-if="userInfo.phone_number||userInfo.position||userInfo.integral">
				<view>{{userInfo.phone_number?userInfo.phone_number:''}}</view>
				<view>{{userInfo.position?userInfo.position:''}}</view>
				<view>{{userInfo.integral?userInfo.integral:0}}积分</view>
			</view>
		</view>
		<!-- 头部 end -->
		
		<!-- 按钮列 -->
		<view class="cell">
			<!-- <view class="cell-item" @click="toPersonInformation">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/personMessage.png"></image>
				<view>完善资料</view>
			</view> -->
			<view class="cell-item" @click="toBindPhone">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/bindPhone.png"></image>
				<view>绑定手机</view>
			</view>
			<view class="cell-item" @click="toPoster">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/poster.png"></image>
				<view>个人名片</view>
			</view>
			<view class="cell-item" @click="toMoney">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/money.png"></image>
				<view>兑换积分</view>
			</view>
			<view class="cell-item">
				<button open-type="contact">
					<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/serve.png"></image>
				</button>
				<view>联系客服</view>
			</view>
			<view class="cell-item"  @click="toMyTeam">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/team.png"></image>
				<view>我的团队</view>
			</view>
			<view class="cell-item"  @click="toMyRemind">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/personMessage.png"></image>
				<view>商务留言</view>
			</view>
			<view class="cell-item"  @click="toUserRule" v-if="ServiceAgreement.status=='1'">
				<image class="header-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/service.png"></image>
				<view>服务协议</view>
			</view>
		</view>
		
		<view class="modal" v-if="modalShow" @click="modalShow=false">
			<view class="modal-body">
				<view class="body-title">创建名片流程</view>
				<view class="body-content">
					<view class="text">1、绑定手机号</view>
					<view class="text">2、用电脑打开http://mmadmin.rzkeji.com后台管理系统，通过验证手机号登录</view>
					<view class="text">3、成为平台会员用户即可创建名片分享给好友，成功邀请好友成为平台会员用户还能获得提成收益</view>
				</view>
			</view>
		</view>
		
		<navBar></navBar>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import navBar from '@/pages/components/navBar/index.vue'
	export default {
		data() {
			return {
				userToken:'',
				modalShow: false,
				ServiceAgreement: '',
			}
		},
		components:{
			navBar
		},
		computed:{
			...mapState( 'userInfo',{
			      userInfo: state => state.userInfo
			    }),
		},
		onLoad() {
			console.log(this.userInfo)
		},
		onShow(){
			getApp().globalData.navBarIndex=4
			let userToken=uni.getStorageSync('userToken');
			this.userToken=userToken;
			if(userToken){
				this.getUserInfo()
			}
			this.getUserRight();
		},
		methods: {
			...mapActions('userInfo', [
			      'setUserInfoAsync' // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
			    ]),
			toLogin(){
				uni.navigateTo({
					url:"/pages/login/index"
				  })
			},
			toPersonInformation(){
				uni.navigateTo({url:'/pages/personInformation/index'})
			},
			toBindPhone(){
				if(this.userInfo.is_bind_phone!=1){
					uni.navigateTo({
						url:'/pages/bindphone/index'
					})
				}else{
					uni.showToast({
						title:"您已绑定手机号！",
						icon:"none"
					})
				}
				
			},
			toPoster(){
				if(this.userInfo.is_complete!=1){
					uni.showToast({
						title:"您还未满足名片的要求！",
						icon:"none"
					})
					this.modalShow = true;
					return
				}
				uni.navigateTo({
					url:'/pages/poster/index'
				})
			},
			toUserRule() {
				uni.navigateTo({
					url: '/pages/rule/index?type='+'user'
				})
			},
			toMoney(){
				uni.navigateTo({
					url:`/pages/money/index`
				})
			},
			toMyRemind(){
				uni.navigateTo({
					url:`/pages/myremind/index`
				})
			},
			toMyTeam(){
				uni.navigateTo({
					url:`/pages/myTeam/index`
				})
			},
			async getUserInfo(){
				let userToken=uni.getStorageSync('userToken');
				if(userToken){
					let res=await this.$api.getUserInfo({
						user_token:userToken
					})
					if(res.data.level=='success'){
						this.setUserInfoAsync(res.data.data)
					}
				}
				
			},
			//获取服务协议
			async getUserRight(){
				let res=await this.$api.getServiceAgreement({user_token: uni.getStorageSync('userToken')});
				if(res.data.level == 'success'){
					this.ServiceAgreement = res.data.data
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import'~@/common/scss/common.scss';
	.content{
		padding: 0 0 130rpx 0;
	}
	.header{
		color:#fff;
		background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);
		height: 200rpx;
		display:flex;
		justify-content:space-between;
		padding:20rpx 50rpx;
		.header-left{
			text-align:center;
			.header-img{
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;
			}
		}
		.header-right{
			&>view{
				padding:5rpx 0;
			}
		}
		
	}
	.modal{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 3000;
		width: 100vw;
		min-height: 100vh;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.modal-body{
			width: 70vw;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.body-title{
				line-height: 80rpx;
				height: 80rpx;
				text-align: center;
			}
			.body-content{
				font-size: 24rpx;
				.text{
					margin: 20rpx 0;
				}
			}
		}
	}
	//按钮列
	.cell{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		.cell-item{
			width:48%;
			margin:40rpx 0;
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			image{
				width:100rpx;
				height: 100rpx;
			}
			view{
				margin-top:20rpx;
				text-align: center;
				width: 100%;
			}
		}
	}
	button{
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0;
		margin: 0;
		background: none;
		border: none;
		image{
			width: 100%;
			height: 100%;
		}
	}
	button::after{
		border: none;
	}
</style>